<template>
	<view class="video" v-if="videoshort.length>0">
		<view class="videoLogo">
			<view class="videoLogoImg">
				<image class="infoImg" src="@/static/images/logo2.png" mode=""></image>
				早知道
			</view>
			<view class="videoPushApp" @click="appurl(null)">
				打开APP
				<launchApp v-if="isWeChatShow"></launchApp>
			</view>
			
		</view>
		<view class="videoDom">
			<video :src="videoshort[0].playUrl" :poster="videoshort[0].imgPic"></video>
		</view>
		<view class="videoInfo">
			<view class="videoInfoImg">
				<view>
					<image class="infoImg" :src="videoshort[0].ffpPic" mode="center"></image>
				</view>
				<view class="">
					{{videoshort[0].category}}
					<view class="time">
						{{dayjs(parseInt(videoshort[0].publishTime)).format('YYYY-MM-DD hh:mm:ss')  }}
					</view>
				</view>
			</view>
			<view class="videoInfoBtn" @click="appurl(null)">
				关注
			</view>
		</view>


		<!-- 		听全文·约5分钟 语音播放 -->

		<view class="videoText">
			<view class="">
				{{videoshort[0].title}}


			</view>

		</view>
		<view class="videoListTitle">
			<view class="">
				热门视频推荐
			</view>
			<view class="addVideo">
				查看更多精彩内容
				<image src="@/static/images/add.png" mode="center‌"></image>
			</view>

		</view>
		<view class="videoList">

			<view class="videoListDom" v-for="(item,index) in videoshort" v-if="index>1" @tap="appurl(item)">
				<image class="videoListImg" :src="item.imgPic" mode="center‌"></image>
				<view class="videoListText">
					{{item.title}}
				</view>
				<view class="videoListInfo">
					<view class="videoListhade">
						<image class="ListInfoImg" :src="item.ffpPic" mode="center"></image>
						{{item.category}}
					</view>
					<view class="videoListxh">
						<image class="xhIimg" src="/static/images/xh.png" mode=""></image>

						{{item.likeCount}}
					</view>
				</view>

			</view>
		</view>
		<view class="footText">
			<view class="footTextX">

			</view>
			<view class="footTextZ">
				C 2025 沙漏早知道
			</view>

		</view>
		<view class="appPush">
			<view class="appPushBtn" @click="appurl(null)">
				APP内打开
				<image src="/static/images/bj.png" mode=""></image>
				<launchApp v-if="isWeChatShow"></launchApp>
			</view>
		
			<!-- <view class="commentAdd">
				查看更多评论
			</view> -->
		</view>
		<view class="shareWX" @tap="shareWXH()" v-if="shareWX">
			<image src="/static/images/llq.png" mode=""></image>
			<view class="shareWXtext">
				请点击右上角
			</view>
			<view class="shareWXtext">
			使用默认浏览器打开下载
			</view>
		</view>
	</view>
</template>

<script>
	import launchApp from '../components/launchApp .vue';
	const isWeChat = () => {
	  const ua = navigator.userAgent.toLowerCase();
	  return ua.includes('micromessenger');
	};
	export default {
		props: {
			videoshort: {
				type: Array,
				default: null
			},
			bizId: {
				type: String,
				default: null
			},
			dataType: {
				type: String,
				default: null
			}

		},
		components: {
			launchApp
		},
		data() {
			return {
				shareWX: false,
				isWeChatShow:false
			};
		},
		onShow(e) {

			
		},
		created() {
			this.isWeChatShow=isWeChat()
		 },
		onLoad(e) {
		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		/*小程序分享*/
		onShareAppMessage() {

		},
		methods: {
			appurl(item) {

				if (isWeChat()) {
					this.shareWX = true
					
				} else {

					const deviceInfo = uni.getSystemInfoSync();
					let queryString
					if (item !== null) {
						this.dataType = item.dataType
						this.bizId = item.id
						queryString = item.shareUrl.split('?')[1]; // 获取"?"后的部分
					} else {
						let shareUrl = this.videoshort[0].shareUrl
						queryString = shareUrl.split('?')[1]; // 获取"?"后的部分
						console.log(queryString,'>??????????????'); // 输出: name=value
						// setTimeout(function() {
						//       // 如果在1秒后仍然没有打开App，则跳转到下载页面或提示用户安装App
						// window.location.href = `https://www.zzdnews.com/app/testFexiang.html?` + `dataType=` + this.dataType +
						//   }, 1000);
					}
					if (deviceInfo.osName == 'ios') {
						var url = 'zzdnews://path?' + queryString // 这里的'myapp'是你的App的URL scheme
						window.location = url
					} else {
						window.location.href = `https://www.zzdnews.com/app/testFexiang.html?` + queryString

					}


				}

			},
			/*加载数据*/
			loadData() {
				this.getData();
			},
			shareWXH() {
				this.shareWX = false
			},
			/*获取文章详情*/
			getData() {

			},

			/*点赞*/
			like() {

			},

			/*评论点赞*/
			commentLike(comment_id, index) {

			},

			/*收藏*/
			favorite() {

			},

			/*初始化添加评论*/
			initAddComment(status) {

			},

			/*添加评论或回复*/
			addCommentOrReply() {

			},

			/*添加评论*/
			addComment() {

			},

		}
	};
</script>

<style scoped lang="scss">
	.shareWX {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 99;
		top: 0;
		left: 0;
		text-align: right;
		color: #fff;
		font-size: 33rpx;
		.shareWXtext{
			padding-right: 60rpx;
		}
		image {
			width: 200rpx;
			height: 90px;
			margin-right: 20rpx;
		}
	}

	.video {
		background-color: #000;
		padding-bottom: 240rpx;
		color: #fff;
		min-height: 100vh;
		color: rgba(255, 255, 255, 0.8);

		.time {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.5);
		}

		.xhIimg {
			width: 30rpx;
			height: 30rpx;
			margin-right: 6rpx;
		}

		.videoLogo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			font-size: 36rpx;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 3;
			box-sizing: border-box;
			background-color: #000;
			border-bottom: 2rpx solid #333;

			.videoLogoImg {
				display: flex;
				align-items: center;
			}

			.videoPushApp {
				width: 155rpx;
				height: 60rpx;
				background: #FD403C;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				font-size: 24rpx;
				align-items: center;
				justify-content: center;
				position: relative;
			}
		}

		.ListInfoImg {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
			box-sizing: border-box;
			border-radius: 50%;
		}

		.infoImg {
			width: 80rpx;
			height: 80rpx;
			margin-right: 10rpx;
			box-sizing: border-box;
			border-radius: 50%;
		}

		.commentIimg {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		.videoDom {
			width: 100%;
			height: calc(82vh);
			padding-top: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 2rpx solid #222;

			video {
				width: 100%;
				height: 100%;
			}
		}

		.videoInfo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
		}

		.videoInfoImg {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.videoInfoBtn {
			width: 104rpx;
			height: 60rpx;
			background: #FD3933;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
		}

		.videoText {
			position: relative;
			padding: 20rpx;
			font-size: 26rpx;
		}
	}

	.videoComment {
		margin-top: 40rpx;


	}

	.addVideo {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.6);

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.foot {
		width: 100%;
		height: 100rpx;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-around;
		left: 0%;
		bottom: 0;

		.footView {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}
	}

	.appPush {
		position: fixed;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		left: 0;
		bottom: 100rpx;
		padding: 20rpx 0;
		z-index: 99;

		.appPushBtn {
			width: 288rpx;
			height: 84rpx;
			background: #FD3933;
			border-radius: 104rpx 104rpx 104rpx 104rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			position: relative;
			image {
				width: 30rpx;
				height: 30rpx;
				position: relative;
				top: 2rpx;
			}
		}

		.commentAdd {
			font-weight: 400;
			font-size: 24rpx;
		}
	}

	.videoListTitle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 20rpx;
	}

	.videoList {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		flex-wrap: wrap;

		.videoListDom {
			width: 48.5%;
			margin-bottom: 40rpx;

			.videoListImg {
				width: 100%;
				border-radius: 10rpx;
			}
		}

		.videoListText {
			font-size: 28rpx;
			margin-bottom: 10rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.videoListInfo {
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.videoListhade {
				display: flex;
				align-items: center;

			}

			.videoListxh {
				display: flex;
				align-items: center;
			}
		}
	}

	.footText {
		text-align: center;
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.6);
		margin-top: 50rpx;

		.footTextX {
			height: 2rpx;
			width: 330rpx;
			background-color: #666;
			margin: auto;
			position: relative;
			top: 22rpx;
			z-index: 2;
		}

		.footTextZ {
			width: 250rpx;
			margin: auto;
			background-color: #000;
			position: relative;
			z-index: 3;
		}
	}
</style>